<template>
    <div class="record" v-title data-title="数据修改">
        <headerTop title="数据修改"></headerTop>
        <div class="modify-type borderBottomLine">
            <span>档案类型</span>
            <van-dropdown-menu active-color="#007CF9">
                <van-dropdown-item v-model="dangTypeValue" :options="dangType" @change="selctDangType"/>
            </van-dropdown-menu>
        </div>

        <div class="modify-type borderBottomLine">
            <span>填报人员</span>
            <input v-model="searchPerson" placeholder="请输入填报人员姓名" class="select-input">
        </div>
        <div class="modify-type" @click="selectTime">
            <span>填报时间</span>
            <span :style="{color:tiaoTime?'#323233':'#7D8082'}">{{tiaoTime?tiaoTime:'请选择填报时间'}}</span>
        </div>
        <div class="person-commit">
            <van-button round type="info" style="width: 100%;font-size: 18px;" @click="startCommit">查找</van-button>
        </div>

        <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                :error.sync="error"
                error-text="请求失败，点击重新加载"
                :immediate-check="false"
                @load="onLoad">

            <div  class="record-content" v-for="(item,index) in list" :key="index" @click="goEditor(item.id,item.reportType)">
                <span class="record-title">{{item.projectName}}</span>
                <div class="record-time">
                    <span style="width: 150px">{{"编号："+item.projectNum}}</span>
                    <span style="margin-left: 30px">{{"日期："+item.reportDate}}</span>
                </div>
            </div>
        </van-list>

        <van-popup v-model="isShowTimePopu" position="bottom" round>
            <van-datetime-picker
                    v-model="currentDate"
                    type="date"
                    title="选择填报时间"
                    :min-date="minDate"
                    :max-date="maxDate"
                    @confirm="selectedTime"
                    @cancel="isShowTimePopu=!isShowTimePopu"
            />
        </van-popup>
    </div>
</template>

<script>
    import headerTop from "@/components/headerTop";
    import {dismissLoading,showLoading, toast} from "@/utils/notify";

    export default {
        name: "managerModifyData",
        components: {
            headerTop
        },
        data() {
            return {
                list:[],
                loading: false,
                finished: false,
                allPage: 0,
                pageSize: 20,
                pageNum: 0,
                minDate: new Date(2000, 0, 1),
                maxDate: new Date(2025, 11, 31),
                currentDate: new Date(),
                dangTypeValue: "",
                dangType: [
                    {text: '请选择档案类型', value: ""},
                    {text: '文书档案', value: "book"},
                    {text: '会计档案', value: "account"},
                    {text: '基建档案', value: "capital"},
                    {text: '特种载体档案', value: "special"},
                    {text: '工程档案', value: "project"},
                    {text: '业务档案', value: "business"},
                    {text: '人事档案', value: "hr"},
                ],
                isShowTimePopu: false,
                tiaoTime: '',
                searchTime: '',
                searchPerson: '',
                error: false,
                currentType:''
            }
        },
        methods: {
            goEditor(id,reportType){
                if (reportType=='book' || reportType=='special'){
                    this.$router.push({
                        name:'officeArchives',
                        query:{
                            infoId:id,
                            type:0,
                            projectType:reportType,
                            modifyByManager:100
                        }
                    })
                }else if (reportType=='hr'){
                    this.$router.push({
                        name: 'personnelArch',
                        query:{
                            infoId: id,
                            type:0,
                            projectType:reportType,
                            modifyByManager:100
                        }
                    })
                }else if (reportType=='account' || reportType=='capital' || reportType=='project' || reportType=='business'){
                    this.$router.push({
                        name: 'projectArch',
                        query:{
                            infoId:id,
                            type:0,
                            projectType:reportType,
                            modifyByManager:100
                        }
                    })
                }
            },
            selectTime() {
                this.isShowTimePopu = true
            },
            selectedTime(time) {
                let date = new Date(time)
                let year=date.getFullYear()
                let month=date.getMonth() + 1
                let day=date.getDate()
                this.tiaoTime = year+'-'+ (month>=10?month:'0'+month) +'-'+(day>=10?day:'0'+day)
                this.searchTime =year+''+ (month>=10?month:'0'+month) +''+(day>=10?day:'0'+day)
                this.isShowTimePopu = false
            },
            selctDangType(value){
                this.currentType=value
            },
            startCommit() {
                if (this.searchPerson=='' && this.searchTime=='' && this.currentType==''){
                    toast("请输入或者选择查询的条件")
                    return;
                }
                this.pageNum=0
                this.list=[]
                this.onLoad();
            },
            onLoad() {
                this.pageNum++;
                this.getRecordList()
            },
            getRecordList(){
                if (this.searchPerson=='' && this.searchTime=='' && this.currentType==''){
                    return;
                }
                showLoading("获取中...")
                let params = {
                    pageSize: this.pageSize,
                    pageNum: this.pageNum,
                    nickname:this.searchPerson,
                    reportDate:this.searchTime,
                    type:this.currentType
                }
                let callBack = (res) => {
                    this.error=false
                    this.allPage = res.paginator.pages
                    res.list.forEach((item) => {
                        this.list.push(item)
                    })
                    this.loading = false;

                    if (this.pageNum >= this.allPage) {
                        this.finished = true;
                    }
                    dismissLoading()
                }
                let errback=()=>{
                    this.loading = false;
                    this.error=true
                    this.pageNum=this.pageNum-1
                    dismissLoading()
                }
                this.$request('POST', "/api/mobile/report/listByAdmin", params, callBack,this,errback)
            }
        }
    }
</script>

<style scoped lang="scss">
    .record {
        min-height: 100vh;
        background: $page-bg;
        padding-top: 56px;
        box-sizing: border-box;

        .modify-type {
            width: 100%;
            height: 50px;
            background: #FFFFFF;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 12px;
            box-sizing: border-box;

            .select-input {
                width: 70%;
                height: 100%;
                border-width: 0px;
                font-size: 15px;
                color: #323233;
                text-align: right;
                box-sizing: border-box;
            }
        }

        .borderBottomLine {
            border-bottom: 1px solid $line-color;
        }

        .person-commit {
            width: 90%;
            height: 45px;
            margin: 20px auto 30px;
            border-radius: 45px;
            font-size: 18px;
            text-align: center;
            line-height: 45px;
            color: #ffffff;
        }
        .record-content{
            background: white;
            padding: 14px 12px;
            margin-bottom: 5px;
            display: flex;
            align-items: flex-start;
            justify-content: center;
            flex-direction: column;

            .record-title{
                font-size: 16px;
                color: #323233;
            }
            .record-time{
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: flex-start;
                margin-top: 10px;
                font-size: 13px;
                color: #969799;
            }

        }
    }
</style>
<style>
    .van-dropdown-menu__bar {
        box-shadow: none;
    }
    .van-dropdown-item__option{
        height: 40px !important;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding-right: 12px;
        padding-left: 12px;
    }
</style>